<template>
  <div>
    <h2>Game</h2>
    <!-- 
      动态路由：我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件
      动态路由主要是通过两种传参方式来实现的
        1.params传参
          -直接在路由路径后面拼接参数，并且需要路由表中配合
          -在路由表中还可以配置哪些参数是可选的
          -我们to写成对象写法也可以进行传递params参数
            -注意：params参数只能和name配合使用，不能和path配合使用
            -注意：params某个参数如果可选，则不能传递空字符串，可以写为null

     -->
    <router-link tag="strong" to="/home/game/item/001/lol">LOL</router-link>
    <router-link
      tag="strong"
      :to="{
        name: 'GameItem',
        params: {
          id: '002',
          title: 'cf',
        },
      }"
      >CF</router-link
    >
    <router-link
      tag="strong"
      :to="{
        name: 'GameItem',
        params: {
          id: '003',
          title: '' || null,
        },
      }"
      >NZ</router-link
    >
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  name: 'Game',
  mounted() {
    console.log('Game-mounted');
  },
};
</script>
<style></style>
